<template>
  <div class="add-subtract-button">
    <input type="number" v-model="quantity" />
    <div>
      <a href="javascript:;" class="add" @click="handleAdd">+</a>
      <a
        href="javascript:;"
        class="sub"
        @click="handleSubtract"
        :class="{
          disabled: quantity === 0,
          active: quantity > 0,
        }"
        >-</a
      >
    </div>
  </div>
</template>

<script>
export default {
  name: "AddSubtractButton",
  data() {
    return {
      quantity: 0,
    };
  },
  methods: {
    handleAdd() {
      this.quantity++;
      this.$emit("update-quantity", this.quantity);
    },
    handleSubtract() {
      if (this.quantity > 0) {
        this.quantity--;
        this.$emit("update-quantity", this.quantity);
      }
    },
  },
};
</script>
<style scoped>
.add-subtract-button {
  display: flex;
}
.add-subtract-button input {
  text-align: center;
  width: 40px;
  height: 40px;
}
.add-subtract-button a {
  display: block;
  width: 20px;
  height: 20px;
  background: rgba(92, 92, 92, 0.651);
  border: 1px solid black;
  text-align: center;
  text-decoration-line: none;
  color: rgb(0, 0, 0);
}
</style>
